<template>
    <div class="charge-block">
        <h3>|&nbsp;账户余额</h3>
        <div class="balance-show-block">
            <span>账户余额:</span>
            <span>{{ balance }}</span>
            <span>点券</span>
        </div>
        <div class="ticket-block">
            <p>充值项目:</p>
            <div class="recharge-item">
                <point-coupon v-for="(item,index) in coupon" :key="index" :params="item" @click.native="buyCoupon(index)"></point-coupon>
                <div class="input-coupon-amount">
                    <input v-model="handlerCharge" style="width:250px;height:68px;" autofocus="autofocus" placeholder="其他数量"/>
                    <span>点券</span>
                </div>
            </div>
        </div>
        <div class="pay-block">
            <span>支付金额:</span>
            <span>500元</span>
        </div>
        <div class="pay-option-block">
            <p>支付方式:</p>
        </div>
        <Button @click="userRecharge" style="width:107px;margin:50px 0 20px;color:#fff;font-size:14px;background:rgba(243,101,57,1);">立即充值</Button>
        <p>请注意充值成功后不可退款，如有疑问请联系：0755-33855777</p>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import pointCoupon from '@/components/user/pointCoupon';
export default {
    components:{pointCoupon},
    computed: {
        ...mapGetters({
            balance:'balance'
        })
    },
    data() {
        return {
            coupon:[
                {
                    pointcoupon:100,
                    money:10,
                    choose:false
                },
                {
                     pointcoupon:500,
                     money:50,
                     choose:false
                },
                {
                     pointcoupon:1020,
                     money:100,
                     choose:false
                },
                {
                     pointcoupon:5100,
                     money:500,
                     choose:false
                },
                {
                     pointcoupon:10230,
                     money:1000,
                     choose:false
                },
                {
                     pointcoupon:30800,
                     money:3000,
                     choose:false
                },
                {
                     pointcoupon:51500,
                     money:5000,
                     choose:false
                },
                 {
                     pointcoupon:103900,
                     money:10000,
                     choose:false
                }
            ],
            indexRef:0,
            handlerCharge:"",
        }
    },
    methods: {
        ...mapActions(['Xrecharge','XuserBalance']),
        buyCoupon(index){
            if(this.indexRef === index){
                this.coupon[this.indexRef].choose = !this.coupon[this.indexRef].choose;
            }else{
                this.coupon[this.indexRef].choose = false;
                this.coupon[index].choose = true;
                this.indexRef = index;
            }
        },
        userRecharge(){
            this.Xrecharge(this.handlerCharge).then(res => {
                this.$Message.success("充值成功");
                this.XuserBalance()
            })
        }
    },
    mounted() {
        this.XuserBalance()
    },

}
</script>

<style lang="scss" scoped>
    .charge-block{
        h3{
            margin:20px 0 40px 0;
        }

        & > p{
            font-size:11px;
            font-weight:400;
            color:rgba(185,191,197,1);
        }
    }
    .balance-show-block{
        padding: 10px;
        height: 50px;
        line-height: 30px;
        background:rgba(237,238,243,1);
    }
    .balance-show-block,.pay-block{
        margin-bottom:30px;
        color:rgba(51,51,51,1);
        font-weight:400;
        span{
            font-size:12px;
            font-weight:400;
        }
        & > span:nth-child(2){
            margin:0 5px;
            font-size:16px;
            font-weight:400;
            color:rgba(243,101,57,1);
        }
    }
    .ticket-block,.pay-option-block{

        display: flex;

        & > p{
            font-size:12px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }

        .recharge-item{
            flex:1;
            display: flex;
            flex-wrap: wrap;

            .input-coupon-amount{
                width: 300px;
                height:68px;
                line-height: 68px;
                margin-left:15px;
                background:rgba(255,255,255,1);
                border:1px solid rgba(211, 217, 223, 1);
                border-radius:6px;
                text-align: center;

                span{
                    width: 40px;
                    display: inline-block;
                    text-align: left;
                    font-size:16px;
                    font-weight:400;
                    color:rgba(243,101,57,1);
                }
            }
        }
    }
</style>